<script setup>

import {onMounted, ref} from "vue";
  import {get} from "../util/Request.js";
  import {Toast} from "tdesign-mobile-vue";
  import router from "../router/index.js";

  const Books=ref([])

  onMounted(()=> {
    get("/tbMe/myBook").then(r => {
      if (r.code == 0) {
        Books.value=r.data
        console.log(Books.value)
      } else {
        Toast(r.data)
      }
    })
  })

const jianjie=(r)=>{
  localStorage.setItem("bookName",r)
  router.push("/aiw")
}

const handleClick = () => {
  // localStorage.setItem("id",typeId)
  window.history.back() // 返回上一级页面
};

</script>

<template>
  <div>
    <t-navbar title="我的图书" :fixed="false" left-arrow @left-click="handleClick" />
  </div>
  <h1>收藏</h1>
  <div>
    <div class="image-demo" style="padding: 0 8px;margin-top: 3%;width:95%;height:100%;flex-wrap: wrap;display: flex">
      <div v-for="image in Books" @click="jianjie(image.bookName)" style="width: 108px; height: 210px; margin-left: 1.2%;">
        <t-image :src="image.bookImg" class="image-container" style="width: 108px; height: 70%;" />
        <p class="image-demo-tip">{{ image.bookName }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>